import react from 'react'
import TableDataBlock from '@/components/TableDataBlock';
import { Row, Col, Button, Space, Tabs, Card } from 'antd';
import { goodsType_status } from '@/common/contact'
export default (props) => {
    const { setData, data = [], onOpen } = props
    const getColumns = [
        {
            title: '商品名称',
            dataIndex: 'goodsName',
        }, {
            title: '商品类型',
            dataIndex: 'goodsType',
            render: (val) => {
                return goodsType_status[val]
            },

        }, {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    title: '移除',
                    click: () => {
                        const { goodsType } = record
                        setData(data.filter(item => {
                            const { id } = item
                            return id !== val
                        }))
                    }
                }]
        }]

    return <Row gutter={[12, 12]}>
        <Col offset={2} span={21}>
            <Button onClick={() => onOpen({ show: true, details: data })} type='primary'>+添加商品</Button>
        </Col>
        <Col offset={2} span={21}>
            {data.length > 0 && <Card
                extra={<Button onClick={() => setData([])} type='link'>全部删除</Button>}
                title='指定商品列表' >
                <TableDataBlock
                    cardProps={false}
                    pagination={false}
                    columns={getColumns}
                    rowKey={(record) => `${record.id}`}
                    list={data}
                ></TableDataBlock>
            </Card>}
        </Col>
    </Row>
}